<script setup lang="ts">
defineOptions({
  name: "residentialEdit"
});
/** 小区操作 */
import { reactive, ref } from "vue";
import { FormInstance, ListItem } from "element-plus";
import { addResidential, getPropertyList } from "@/api/community";
import { message } from "@/utils/message";

const formData = reactive({
  id: null,
  name: "",
  developer: "",
  address: "",
  completion: null,
  propertyId: null
});
const rules = {
  name: [{ required: true, message: "小区名称不得为空", trigger: "blur" }],
  developer: [{ required: true, message: "开发商不得为空", trigger: "blur" }],
  address: [{ required: true, message: "小区地址不得为空", trigger: "blur" }],
  completion: [{ required: true, message: "小区竣工时间不得为空", trigger: "blur" }]
};
const resetForm = () => {
  formData.id = null;
  formData.name = "";
  formData.developer = "";
  formData.address = "";
  formData.completion = null;
  formData.propertyId = null;
};
const formRef = ref<FormInstance>(null);
const propertyList = ref();
const addResidentialFc = formRef => {
  if (!formRef) return;
  formRef.validate(() => {
    addResidential(formData).then(res => {
      message(res.msg, { type: "success" });
    });
  });
};

const loading = ref(false);
const list = ref<ListItem[]>([]);
const onSearch = (query: string) => {
  loading.value = true;
  getPropertyList(1, query).then(res => {
    propertyList.value = res.data.records;
    loading.value = false;
    console.log(list);
  });
};
onSearch("");
</script>

<template>
  <div class="main">
    <el-row justify="center" :gutter="12">
      <el-col :span="12">
        <el-form
          ref="formRef"
          label-position="top"
          label-width="auto"
          :model="formData"
          style="max-width: 600px"
          :rules="rules"
        >

          <el-form-item label="小区名" prop="name">
            <el-input :validate-event="true" v-model="formData.name" />
          </el-form-item>
          <el-form-item label="开发商" prop="developer">
            <el-input v-model="formData.developer" />
          </el-form-item>
          <el-form-item label="小区地址" prop="address">
            <el-input v-model="formData.address" />
          </el-form-item>
          <el-form-item label="竣工时间" prop="completion">
            <el-date-picker
              v-model="formData.completion"
              type="datetime"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择时间"
            />
          </el-form-item>

          <el-form-item label="分管物业" prop="property">
            <el-select
              v-model="formData.propertyId"
              placeholder="Select"
              size="large"
              style="width: 240px"
            >
              <el-option
                v-for="item in propertyList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <div style="text-align: center">
              <el-button type="primary" @click="addResidentialFc(formRef)"
              >提交
              </el-button>
              <el-button @click="resetForm()">重置</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

.main-content {
  margin: 24px 24px 0 !important;
}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}</style>
